<template>
	<view :style="{'--color':color}">

		<view class="coupon" v-if="Sale.exchangeFen > 0">
			<text class="color_33 size32">积分</text>
			<view class="couponBox" @click.stop="Show = true">
				<view class="d-flex a-center p-right20">
					<block v-if="pageData.useIntegral">
						<text class="color size26">-￥</text>
						<text class="color size36">{{Sale.genToMoney.toFixed(2)}}</text>
					</block>
				</view>
				<text class="iconfont icon-xiangyouxiayiye color_99 size26"></text>
			</view>
		</view>


		<u-popup :show="Show" @close="close" mode="bottom" :round="10" closeable>
			<view class="Wrapper">
				<view class="head">
					<view class="head_title">积分兑换</view>
				</view>
				<view class="content">
					<view class="PointsList" @click.stop="Use_points" :class="{'Active':pageData.useIntegral}">
						<view class="wrap flex-1 ">
							<text class="color_33 size32">抵扣</text>
							<text class="color size32 m-right10">￥{{genToMoney}}</text>
							<text class="color_33 size32">使用{{Sale.exchangeFen}}积分</text>
						</view>
						<view class="cou_Rigth">
							<text class="icon-xuanzhong iconfont size28"></text>
						</view>
					</view>
				</view>
				<view class="footer">
					<view class="newCreat" @click="close">确定</view>
				</view>
			</view>
		</u-popup>
	</view>
</template>

<script>
	import { mapState } from "vuex"
	export default {
		props: ['pageData', 'Sale'],
		data() {
			return {
				Show: false,
			}
		},
		created() {

		},
		methods: {
			close() {
				this.Show = false
			},

			Use_points() {
				this.$emit('Use_points')
			}
		},

		computed: {
			...mapState(['color', 'vid']),
			genToMoney() {
				if (!this.Sale || !this.Sale.genToMoney) return
				return this.Sale.genToMoney.toFixed(2)
			}
		}
	}
</script>
<!-- 
  type  1 抵用卷 2 折扣卷 3 兑换卷 4 免邮卷 
 
 -->
<style lang="scss" scoped>
	@mixin Fleac {
		display: flex;
		justify-content: center;
		align-items: center;
	}

	.Wrapper {
		width: 100%;

		.head {
			width: 100%;
			display: flex;
			flex-direction: column;
			align-items: center;

			&_title {
				width: 100%;
				padding: 30rpx 0 30rpx;
				display: flex;
				justify-content: center;
				color: #000;
				font-size: 34rpx;
				border-bottom: 1rpx solid #f8f8f8;
			}

			&_sale {
				width: 100%;
				padding: 20rpx 24rpx;

				.Sale_txt {
					color: #000;
					font-size: 24rpx;
					font-weight: normal;
				}
			}
		}

		.content {
			width: 100%;
			background-color: #f7f8fa;
			min-height: 400rpx;
			padding: 0 24rpx 24rpx;
			overflow-y: scroll;

			.Lists {
				width: 100%;
				background-color: #ffffff;
				margin-top: 24rpx;
				display: flex;
				align-items: center;
				border-radius: 10rpx;
				overflow: hidden;

				.cou_Left {
					@include Fleac;
					flex-direction: column;
					width: 200rpx;
					height: 190rpx;
					background-image: linear-gradient(to right, #6b98db, #6a7dd6);

					.unit {
						font-size: 28rpx;
						margin-top: 22rpx;
					}
				}

				.cou_Center {
					flex: 1;
					height: 190rpx;
					padding: 20rpx;
					display: flex;
					flex-direction: column;
					justify-content: space-between;

					.cou_title {
						color: #333;
						font-size: 26rpx;
					}
				}


			}

			.PointsList {
				width: 100%;
				padding: 30rpx 24rpx;
				background-color: #ffffff;
				border-radius: 10rpx;
				margin-top: 24rpx;
				display: flex;
				justify-content: space-between;
				align-items: center;
			}

			.cou_Rigth {
				width: 36rpx;
				height: 36rpx;
				border: 1px solid #ccc;
				border-radius: 50%;
				display: flex;
				justify-content: center;
				align-items: center;
				margin-right: 20rpx;
			}

			.Active {
				.cou_Rigth {
					background-color: var(--color);
					border: 1px solid var(--color);
				}
			}
		}

		.footer {
			width: 100%;
			height: 100rpx;
			@include Fleac;

			.newCreat {
				@include Fleac;
				width: 600rpx;
				height: 70rpx;
				background-color: var(--color);
				border-radius: 35rpx;
				color: #ffffff;
				font-size: 32rpx;
			}
		}
	}

	.coupon {
		width: 100%;
		padding: 20rpx 0;
		display: flex;
		align-items: center;

		.couponBox {
			flex: 1;
			display: flex;
			align-items: center;
			justify-content: flex-end;
		}
	}
</style>